<template>
  <view class="opinion_container">
    <view class="opinion">
      <view class="title">反馈问题类型和意见</view>
      <view class="option">
        <text v-for="(item, index) in option" :key="index"
          :style="item.code === uploadOption ? 'border:1px solid #2871fc;color:#2871fc;' : ''"
          @click="uploadOption = item.code">{{ item.name }}</text>
      </view>
      <view class="text">
        <textarea placeholder="请输入内容" v-model="textarea" @input="sumfontnum"
          placeholder-style="font-size:28rpx;color:#ADADAD;" :maxlength="maxlength">
        </textarea>
        <text class="text2">{{ fontNum }}/{{ maxlength }}</text>
      </view>
      <view class="photograph">
        <view v-for="(item, index) in selectImgList" :key="index">
          <image style="width: 134.72rpx; height: 134.72rpx" :src="item" mode="aspectFit"></image>
        </view>
        <view @click="clickUpload">
          <image :src="staticUrl() + '/personalCenter/ameraIcon.png'"></image>
          <text>添加照片</text>
        </view>
      </view>
    </view>
    <view class="phone">
      <view class="title">您的电话：</view>
      <view class="text">
        <input type="text" placeholder="请输入手机号" v-model="phone" :maxlength="phoneMaxlength" />
        <!-- <textarea placeholder="请输入手机号" v-model="phone"
          placeholder-style="color:#ADADAD;font-size:40rpx;" :maxlength="phoneMaxlength">
        </textarea> -->
      </view>
    </view>
    <view class="button">
      <button @click="submit">提交</button>
    </view>
    <PermissionPopup v-if="isPermission" :visible="isPermission" :messageTxt="permissionTxt"
      @updateVisible="isPermission = $event" @scanCoding="scanCoding">
    </PermissionPopup>
  </view>
</template>

<script>
import { uploadImage, getOpinionType, submitOpinion } from '@/api/personalCenter/index.js'
import PermissionPopup from '@/components/permission/index.vue'
export default {
  components: {
    PermissionPopup
  },
  data () {
    return {
      isPermission: false,
      permissionTxt: '',
      option: [],
      uploadOption: '',
      textarea: '',
      maxlength: 300,
      fontNum: 0,
      phone: '',
      phoneMaxlength: 11,
      selectImgList: [],
      selectUrlList: []
    }
  },
  onLoad () {
    getOpinionType().then(res => {
      if (res.code === 200) {
        this.option = res.data
        this.option.forEach(i => {
          this.$set(i, 'style', false)
        })
      }
    })
  },
  methods: {
    sumfontnum (e) {
      this.fontNum = e.detail.value.length
    },
    submit () {
      if (this.phone) {
        var phoneReg = /(^1\d{10}$)|(^[0-9]\d{7}$)/
        if (!phoneReg.test(this.phone)) {
          uni.showToast({
            icon: 'none',
            title: `手机号码格式错误`,
            mask: true
          })
          return
        }
      }
      if (!this.uploadOption.length) {
        uni.showToast({
          icon: 'none',
          title: `请选择类型`,
          mask: true
        })
        return
      }
      if (!this.textarea || !this.phone) {
        uni.showToast({
          icon: 'none',
          title: `请输入${!this.textarea ? '反馈内容' : !this.phone ? '手机号' : ''}`,
          mask: true
        })
        return
      }
      if (this.selectImgList.length > 0) {
        const files = this.selectImgList
        this.selectImgList.forEach((item, index) => {
          uni.uploadFile({
            url: 'https://www.xdyy100.com/wholesale/essential/common/common/upload/file', //上传图片api
            name: 'file',
            filePath: item,
            header: {
              accessToken: uni.getStorageSync('token'),
              'Content-type': 'multipart/form-data'
            },
            success: res => {
              let group = JSON.parse(res.data)
              if (group.code === 200) {
                this.selectUrlList.push(group.data.url)
              } else {
                uni.showToast({
                  title: group.msg,
                  icon: 'none',
                  mask: true
                })
              }
              if (index === this.selectImgList.length - 1) {
                submitOpinion({
                  type: this.uploadOption,
                  context: this.textarea,
                  mobile: this.phone,
                  images: this.selectUrlList + ''
                }).then(res => {
                  if (res.code === 200) {
                    uni.showToast({
                      icon: 'none',
                      title: `完成`,
                      mask: true
                    })
                    uni.navigateBack(1)
                  }
                })
              }
            }
          })
        })
      } else {
        submitOpinion({
          type: this.uploadOption,
          context: this.textarea,
          mobile: this.phone,
          images: this.selectUrlList + ''
        }).then(res => {
          if (res.code === 200) {
            uni.showToast({
              icon: 'none',
              title: `完成`,
              mask: true
            })
            uni.navigateBack(1)
          }
        })
      }
    },
    // 意见反馈
    clickUpload () {
      // #ifndef MP
      if (uni.getSystemInfoSync().osName === 'ios') {
        this.scanCoding()
      } else {
        this.isPermission = true
        this.permissionTxt =
          '用于获取设备权限进行拍照、图片上传，需要获取手机相机、相册（存储）权限'
      }
      // #endif
      // #ifdef MP
      this.scanCoding()
      // #endif
    },
    scanCoding () {
      let that = this
      uni.chooseImage({
        success (res) {
          that.selectImgList = res.tempFilePaths
        }
      })
    }
  }
}
</script>

<style lang="scss" scoped>
.opinion_container {
  width: 100%;
  min-height: 100vh;
  box-sizing: border-box;
  background: #f9f9f9;
  padding-top: 25rpx;
  padding-bottom: 200rpx;

  .opinion {
    margin: 0 25rpx;
    background: #ffffff;
    border-radius: 11rpx;
    padding-bottom: 29.86rpx;

    .title {
      display: inline-block;
      font-size: 33rpx;
      color: #000000;
      margin: 58.33rpx 0 29.86rpx 22.22rpx;
    }

    .option {
      text {
        display: inline-block;
        font-size: 25rpx;
        border: 1px solid #8d8d8d;
        border-radius: 10rpx;
        margin: 0 14.99rpx 20.83rpx 34.99rpx;
        padding: 4.03rpx 11.48rpx;
      }
    }

    .text {
      position: relative;

      textarea {
        box-sizing: border-box;
        width: 658rpx;
        height: 339rpx;
        background: #f9f9f9;
        border-radius: 11rpx;
        margin: 0 20.83rpx;
        padding: 30.56rpx 22.22rpx 50.56rpx;
      }

      .text2 {
        position: absolute;
        bottom: 45.33rpx;
        right: 49.31rpx;
        font-size: 25rpx;
        color: #adadad;
      }
    }

    .photograph {
      display: flex;
      flex-flow: row wrap;

      // justify-content: center;
      view {
        width: 134.72rpx;
        height: 134.72rpx;
        display: flex;
        flex-flow: column nowrap;
        justify-content: center;
        align-items: center;
        margin-top: 29.86rpx;
        margin-left: 21.53rpx;
      }

      view:last-child {
        border: 1px dashed #adadad;
        border-radius: 10rpx;
      }

      image {
        width: 33.33rpx;
        height: 30.56rpx;
      }

      text {
        font-size: 19rpx;
        color: #adadad;
        line-height: 31rpx;
      }
    }
  }

  .phone {
    margin: 25rpx 25rpx 0;
    background: #ffffff;
    border-radius: 11rpx;
    padding-bottom: 65.97rpx;

    .title {
      display: inline-block;
      font-size: 33rpx;
      color: #000000;
      margin: 58.33rpx 0 29.86rpx 22.22rpx;
    }

    .text {
      padding: 0 20rpx;

      input {
        color: #adadad;
        background: #f9f9f9;
        padding: 18.06rpx 21.53rpx;
        font-size: 28rpx;
        background: #f9f9f9;
        border-radius: 11rpx;
      }
    }

    textarea {
      width: 600rpx;
      height: 62rpx;
      line-height: 62rpx;
      font-size: 28rpx;
      background: #f9f9f9;
      border-radius: 11rpx;
      margin: 0 20.83rpx;
      padding: 18.06rpx 21.53rpx 18.06rpx;
    }
  }

  .button {
    width: 100%;
    position: fixed;
    left: 0;
    bottom: 0;
    height: 160rpx;
    background: #ffffff;

    button {
      width: 678rpx;
      height: 69rpx;
      line-height: 68rpx;
      font-size: 29rpx;
      color: #ffffff;
      background: #2871fc;
      border-radius: 35rpx;
      margin-top: 20rpx;
    }
  }
}
</style>
